<template>
	<view class="container">
		<view class="box" v-for="(item,index) in tvList" :key="index" @click="clickBox(item)">
			<image :src="item.url" mode="" style="width: 167rpx;height: 127rpx;"></image>
			<view style="margin-left: 22rpx;">
				<text>{{item.title}}</text>
				<view style="margin-top: 12rpx;color: #9F9F9F;">
					<text>{{item.fm}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tvList: [{
					url: '../../../static/image/MaskGroup.png',
					title: '中国国际广播电台',
					fm: 'FM 101.1'
				}, {
					url: '../../../static/image/MaskGroup.png',
					title: '北京青年广播',
					fm: 'FM 98.2'
				}, {
					url: '../../../static/image/MaskGroup.png',
					title: '四川卫视',
					fm: 'FM 95.5'
				}]
			};
		},
		methods: {
			clickBox(item) {
				console.log(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 9rpx 27rpx;

		.box {
			width: 100%;
			height: 170rpx;
			display: flex;
			align-items: center;
			border-bottom: 2px solid #F8F8F8;
			margin-bottom: 21rpx;
		}
	}
</style>
